<template>
  <div class="page-container">
    <div class="page-header">
      <button class="back-button" @click="goToHome">
        <span class="icon-arrow-left"></span>
        返回首页
      </button>
      <h1>服务指标统计</h1>
      <p>监控和分析服务质量关键指标</p>
    </div>
    
    <div class="stats-overview">
      <div class="stat-card">
        <div class="stat-title">平均响应时间</div>
        <div class="stat-value">12分钟</div>
        <div class="stat-trend positive">↓ 15% 较上周</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">平均解决时间</div>
        <div class="stat-value">4.2小时</div>
        <div class="stat-trend positive">↓ 8% 较上周</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">首次解决率</div>
        <div class="stat-value">87%</div>
        <div class="stat-trend positive">↑ 3% 较上周</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">服务可用性</div>
        <div class="stat-value">99.92%</div>
        <div class="stat-trend negative">↓ 0.03% 较上周</div>
      </div>
    </div>
    
    <div class="chart-section">
      <h2>响应时间趋势</h2>
      <div class="chart-container">
        <div ref="responseTimeChart" class="chart"></div>
      </div>
    </div>
    
    <div class="chart-section">
      <h2>服务等级达成率</h2>
      <div class="chart-container">
        <div ref="slaRateChart" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ServiceMetrics',
  data() {
    return {
      responseTimeChart: null,
      slaRateChart: null
    };
  },
  methods: {
    goToHome() {
      this.$router.push('/home');
    },
    // 初始化响应时间趋势图
    initResponseTimeChart() {
      const chartDom = this.$refs.responseTimeChart
      if (!chartDom) return
      
      if (this.responseTimeChart) {
        this.responseTimeChart.dispose()
      }
      
      this.responseTimeChart = echarts.init(chartDom)
      
      const option = {
        title: { text: '每日响应时间趋势' },
        tooltip: { 
          trigger: 'axis',
          formatter: '{b}: {c} 分钟'
        },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { 
          type: 'value', 
          name: '分钟',
          min: 0
        },
        series: [{
          data: [15, 12, 14, 10, 13, 9, 12],
          type: 'line',
          smooth: true,
          name: '响应时间',
          lineStyle: { width: 3 },
          itemStyle: { color: '#3498db' },
          areaStyle: { 
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(52, 152, 219, 0.3)'
              }, {
                offset: 1, color: 'rgba(52, 152, 219, 0)'
              }]
            }
          }
        }]
      }
      
      this.responseTimeChart.setOption(option)
    },
    // 初始化服务等级达成率图表
    initSLARateChart() {
      const chartDom = this.$refs.slaRateChart
      if (!chartDom) return
      
      if (this.slaRateChart) {
        this.slaRateChart.dispose()
      }
      
      this.slaRateChart = echarts.init(chartDom)
      
      const option = {
        title: { text: 'SLA达成率' },
        tooltip: { 
          trigger: 'axis',
          formatter: '{b}: {c}%'
        },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { 
          type: 'value', 
          name: '%', 
          max: 100,
          axisLabel: { formatter: '{value}%' }
        },
        series: [{
          data: [99.8, 99.9, 99.7, 99.9, 99.8, 99.6, 99.92],
          type: 'bar',
          name: '达成率',
          itemStyle: {
            color: function(params) {
              // SLA低于99.5%显示红色
              return params.data < 99.5 ? '#e74c3c' : '#2ecc71';
            }
          }
        }]
      }
      
      this.slaRateChart.setOption(option)
    }
  },
  mounted() {
    this.initResponseTimeChart()
    this.initSLARateChart()
    
    window.addEventListener('resize', () => {
      if (this.responseTimeChart) this.responseTimeChart.resize()
      if (this.slaRateChart) this.slaRateChart.resize()
    })
  },
  beforeUnmount() {
    if (this.responseTimeChart) this.responseTimeChart.dispose()
    if (this.slaRateChart) this.slaRateChart.dispose()
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 20px;
  font-weight: 500;
}

.back-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-trend {
  font-size: 13px;
}

.positive {
  color: #2ecc71;
}

.negative {
  color: #e74c3c;
}

.chart-section {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.chart-container {
  margin-top: 15px;
}

.chart {
  width: 100%;
  height: 300px;
}
</style>